<template>
  <a-card class="item">
    <a-row class="step">
      <a-col :xs="8" :sm="8" :md="8" :lg="8" style="padding-right: 5px">
        <span class="step-order">{{ steps[index].order }}</span>
        <a-input v-model="steps[index].name" placeholder="自定义步骤名" class="step-name"></a-input>
        <span class="step-split">：</span>
      </a-col>
      <a-col :xs="7" :sm="7" :md="7" :lg="7" style="padding-right: 5px">
        <a-select v-model="steps[index].event" placeholder="请选择事件">
          <a-select-opt-group label="默认事件">
            <a-select-option v-if="item.type === 0" v-for="item in events" :value="item.name" :key="item.name">{{ item.displayName }}</a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="自定义事件">
            <a-select-option v-if="item.type === 1" v-for="item in events" :value="item.name" :key="item.name">{{ item.displayName }}</a-select-option>
          </a-select-opt-group>
        </a-select>
      </a-col>
      <a-col :xs="9" :sm="9" :md="9" :lg="9" style="padding-right: 5px">
        <a-button icon="minus" @click="removeItem(index)" style="margin-right: 5px"></a-button>
        <a-button @click="addRule">添加筛选</a-button>
      </a-col>
    </a-row>
    <MultiLevelFilter ref="filter" v-bind:properties="properties" v-model="steps[index].filter" v-on:remove="demote" v-bind:datasourceId="datasourceId"></MultiLevelFilter>
  </a-card>
</template>

<script>
import MultiLevelFilter from "@/views/components/Filter/MultiLevelFilter.vue";
export default {
  name: "FunnelStep",
  components: {MultiLevelFilter},
  props: {
    steps: Array,
    index: Number,
    properties: Array,
    events: Array,
    datasourceId: Number
  },
  data: function () {
    return {

    };
  },
  methods: {
    //条件组降级：如果条件组只剩一个条件，那么移除当前条件组，将剩下的这个条件合并到上级条件组中。
    demote: function (index) {
      let originalFilter = this.steps[this.index].filter;
      let filterIndex = originalFilter.filters.findIndex((item) => {
        return item.index === index;
      });
      if(filterIndex !== -1) {
        let filter = originalFilter.filters[filterIndex];
        originalFilter.filters.splice(filterIndex, 1);
        originalFilter.condition = filter.condition;
        filter.rules.forEach((item, index) => {
          originalFilter.rules.push(item);
        });
        filter.filters.forEach((item, index) => {
          originalFilter.filters.push(item);
        });
      }
    },
    addRule() {
      this.$refs.filter.addRule();
    },
    addFilterItem: function () {
      this.$refs.filterGroup.addItem();
    },
    isLast: function () {
      return this.steps.length === (this.index + 1);
    },

    removeItem: function (index) {
      this.steps.splice(index, 1);
      this.resetOrder();
    },
    resetOrder: function () {
      console.log('resetOrder');
      for(let i = 0; i < this.steps.length; i++) {
        this.steps[i].order = i+1;
      }
    }
  }
}
</script>

<style scoped>
.item {
  margin: 0px 0px 10px 0px;
  background: rgb(255,255,255);
  padding: 5px;
  /*border: 1px solid  #54ba52;*/
}
.step {
  padding-bottom: 10px;
}
.step-order {
  width: 30px;
  height: 30px;
  display: inline-block;
  position: relative;
  text-align: center;
  line-height: 30px;
  background-color: #c2e5cf;
  color: #49d1a0;
  margin-right: 2px;
}
.step-name {
  display: inline-block;
  position: relative;
  width: calc(100% - 50px);
}
.step-split {
  display: inline-block;
  position: relative;
  width: 10px;
  margin-left: 8px;
}
</style>
